<template>
  <!-- 查看详情 2018/8/18 15:04 john -->
  <div>

    <tablePage ref="subOrderTab" :staticData="subOrderData" :isStartLoad="false" :mode="1">
      <template slot-scope="props">
        <Table :columns="subOrderColumn" border :data="props.data" @on-sort-change="props.sortChange"></Table>
      </template>
    </tablePage>

    <!--<xlinkModal v-model="ImgModel" title="图片" className="vertical-center-modal" width="700px;">-->
      <!--<viewMedia :lookImtList="lookImtList" v-if="ImgModel"></viewMedia>-->
    <!--</xlinkModal>-->
  </div>
</template>

<script>
  import {getTakeOutContainerByDriverByPage} from '@api/backEnd/fleetOrder/index'
  import xlinkModal from '@components/modal/xlinkModal'
  // import viewMedia from './viewMedia'
  import tablePage from '@components/table/tablePage.vue'
  // import {getTrainTypeCN} from './fleetDispatch1/components/trainTypeEnum'

  export default {
    name: 'view-tack-out-detail',
    data () {
      let subOrderColumn = [
        // {
        //   title: '操作',
        //   key: 'action',
        //   align: 'center',
        //   width: 100,
        //   render: (h, params) => {
        //     // let viewImg = ''
        //     // if (params.row.voucherImg && JSON.parse(params.row.voucherImg).length > 0) {
        //     //   viewImg = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailImg(params.row)}>图片查看</i-button>)
        //     // } else {
        //     //   viewImg = (<i-button size="small" style="margin-right: 5px;">图片查看</i-button>)
        //     // }
        //     let btnArray = []
        //     let removeBtn = (<i-button type="error" size="small" style="margin-right: 5px;" onClick={() => this.remove(params.row)}>掏箱完成</i-button>)
        //     // powerUtil.contains('viewDetail') && btnArray.push(viewImg)
        //     btnArray.push(removeBtn)
        //     return (btnArray)
        //   }
        // },
        {
          title: '子运单单号',
          ellipsis: 'true',
          key: 'subOrderId',
          width: 200
        },
        {
          title: '创建时间',
          ellipsis: 'true',
          width: 150,
          key: 'createTime'
        },
        {
          title: '箱号',
          ellipsis: 'true',
          width: 150,
          key: 'containerNo'
        },
        {
          title: '件数',
          ellipsis: 'true',
          width: 150,
          key: 'containerNum'
        },
        {
          title: '司机',
          ellipsis: 'true',
          key: 'driverName',
          width: 250
        },
        {
          title: '车队',
          ellipsis: 'true',
          key: 'fleetName',
          width: 250
        },
        {
          title: '状态',
          ellipsis: 'true',
          width: 100,
          key: 'state',
          render: (h, params) => {
            let state = params.row.state
            if (state === 99) {
              return (<span style="color:red">作废</span>)
            } else if (state === 2) {
              return (<span style="color:green">已完成</span>)
            } else if (state === 1) {
              return (<span style="color:green">正常</span>)
            } else {
              return ''
            }
          }
        }

      ]
      let subOrderData = []
      let positionList = []
      let ImgModel = false
      let lookImtList = []
      let datas = {
        subOrderColumn,
        subOrderData,
        positionList,
        ImgModel,
        lookImtList
      }
      return datas
    },
    props: {
      params: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {},
    methods: {
      getSubOrderData () {
        // console.log('参数')
        // console.log(this.params)
        if (!(this.params && this.params.id)) {
          return
        }
        let param = {
          subOrderId: this.params.id,
          fleetId: this.params.fleetId
        }
        // console.log(param)
        getTakeOutContainerByDriverByPage(param).then(res => {
          // console.log(res)
          if (res.data.isSuccess === 1) {
            this.subOrderData = res.data.data.rows
          } else {
            Promise.reject(new Error(res.data.res))
          }
        }).catch((err) => {
          console.log('接口getOrderDetail:' + err)
        })
      },
      viewDetailImg (row) {
        console.log('viewDetailImg', row.voucherImg)
        this.lookImtList = JSON.parse(row.voucherImg)
        this.ImgModel = true
      }
    },
    mounted () {
      this.getSubOrderData()
    },
    components: {tablePage, xlinkModal}
  }
</script>
